<template>
  <div class="passport-area flx-row-c-c">
    <div class="box-area box-size">
      <div class="login-tab-area flx-row-c-c">
        <div class="item active">找回密码</div>
      </div>
      <div class="login-main-area flx-col-s-c">
        <div class="step-area flx-row-bw-c">
          <div
            class="step-item"
            :class="[
              index < step
                ? 'b-arrow3'
                : index == step
                ? 'b-arrow2'
                : 'b-arrow1',
            ]"
            v-for="(item, index) in stepList"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
        <Spin :withIcon="true" v-if="loading"></Spin>
        <template v-if="step == 0">
          <div class="flx-row-bw-c w-p-100 mg-b-15">
            <div class="title f-14 c-d2" style="letter-spacing: 32px">账户</div>
            <Input
              v-model.trim="account"
              placeholder="请输入用户ID/手机号码"
              maxlength="20"
              type="text"
              size="large"
            />
          </div>
          <div class="flx-row-bw-c w-p-100 mg-b-15">
            <div class="title f-14 c-d2" style="letter-spacing: 8px">
              验证码
            </div>
            <Input
              v-model="photoCode"
              placeholder="请输入验证码"
              maxlength="4"
              size="large"
            />
            <div class="code-area" @click="refreshCode">
              <Identify
                :identifyCode="identifyCode"
                :contentWidth="100"
                :contentHeight="40"
                :fontSizeMax="25"
              />
            </div>
          </div>
          <div
            class="user-strong-button big-button-size-40 w-p-100 mg-b-15"
            @click="checkAccount"
          >
            下一步
          </div>
        </template>
        <template v-if="step == 1">
          <span class="c-o c-12 mg-b-15" style="text-align: center"
            >为了你的帐号安全，请完成身份验证</span
          >
          <div class="flx-row-s-c w-p-100 mg-b-15">
            <div class="title f-14 c-d2">手机号码</div>
            <span class="f-14 c-d2">{{ phone }}</span>
          </div>
          <div class="flx-row-bw-c w-p-100 mg-b-15">
            <div class="title f-14 c-d2" style="letter-spacing: 8px">
              验证码
            </div>
            <Input
              v-model="code"
              placeholder="请输入验证码"
              maxlength="6"
              size="large"
            />
            <div
              class="user-normal-button code-button"
              style="width: 100px"
              :class="[
                getCodeAvailable ? 'user-normal-button' : 'forbid-button',
              ]"
              @click="getCode"
            >
              {{ getCodeContent }}
            </div>
          </div>
          <div
            class="user-strong-button big-button-size-40 w-p-100 mg-b-15"
            @click="checkPhone"
          >
            下一步
          </div>
        </template>
        <template v-else-if="step == 2">
          <div class="flx-row-s-c w-p-100 mg-b-15">
            <div class="title f-14 c-d2">手机号码</div>
            <span class="f-14 c-d2">{{ phone }}</span>
          </div>
          <div class="flx-row-bw-c w-p-100 mg-b-15">
            <div class="title f-14 c-d2" style="letter-spacing: 8px">
              新密码
            </div>
            <Input
              name="rpassword"
              v-model="password"
              type="password"
              password
              placeholder="请输入新密码"
              maxlength="16"
              @keydown.native="keydown($event)"
              autocomplete="new-password"
              size="large"
            />
          </div>
          <div class="flx-row-bw-c w-p-100 mg-b-15" style="margin-bottom: 8px">
            <div class="title f-14 c-d2">确认密码</div>
            <Input
              v-model="passwordAgain"
              name="rpassworda"
              type="password"
              password
              placeholder="请再次输入新密码"
              maxlength="16"
              @keydown.native="keydown($event)"
              autocomplete="new-password"
              size="large"
            />
          </div>
          <div class="f-12 mg-b-15 c-g w-p-100" style="padding-left: 80px">
            密码至少8个字符，最多16个字符
          </div>
          <div
            class="user-strong-button big-button-size-40 w-p-100 mg-b-15"
            @click="submit"
          >
            确定
          </div>
        </template>
        <template v-else-if="step == 3">
          <div class="flx-row-c-c" style="height: 200px">
            <div class="success-icon"></div>
            <span class="c-d2 f-16 f-w-600">恭喜你，密码重置成功！</span>
          </div>
          <router-link
            to="/login"
            class="user-strong-button big-button-size-40 w-p-100 mg-b-15"
          >
            立即登录
          </router-link>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import {
  forgetPwdVerify,
  forgetPwdVerifySmsCode,
  forgetPwdChange,
  forgetPwdVerifyCode,
  getPublicKey,
} from "@/api/user";
import { validPassword } from "@/utils/validate.js";
import { makeCode } from "@/utils/format";
import JSEncrypt from "jsencrypt";
export default {
  components: {
    Identify: () => import("_c/identify"),
  },
  name: "VipLogin",
  data() {
    return {
      stepList: ["1.输入账户", "2.验证身份", "3.重置密码", "4.完成"],
      step: 0,
      // 是否加载中
      loading: false,

      // 标题数据
      active: 0,

      // 图形验证码
      identifyCode: "",

      // 表单数据
      account: "",
      photoCode: "",
      phone: "159****1234",
      code: "",
      password: "",
      passwordAgain: "",
      verifyCode: null,

      // 获取验证码数据
      // 是否可以获取验证码
      getCodeAvailable: true,
      // 获取验证码按钮上的文字
      getCodeContent: "获取验证码",
      // 获取验证码定时器
      getCodeInterval: null,

      // 验证数据
      checkSuccess: false,
    };
  },
  mounted() {
    this.getPublicKey();
    this.identifyCode = makeCode(this.identifyCodes, 4);
  },
  methods: {
    // 刷新验证码
    refreshCode() {
      this.identifyCode = makeCode(this.identifyCodes, 4);
    },
    // 第一步检查账户
    async checkAccount() {
      if (!this.account) {
        this.$Message.warning("请输入用户ID/手机号码！");
        return;
      }
      if (!this.photoCode) {
        this.$Message.warning("请输入验证码！");
        return;
      }
      if (this.photoCode.toLowerCase() != this.identifyCode.toLowerCase()) {
        this.$Message.warning("验证码不正确！");
        return;
      }
      this.loading = true;
      let res = await forgetPwdVerify({
        account: this.account,
      });
      if (res.code == 200) {
        this.phone = res.data.mobile;
        this.verifyCode = res.data.verifyCode;
        this.step = 1;
        this.getCode();
      }
      this.loading = false;
    },
    // 第二步验证身份
    async checkPhone() {
      if (this.code == null || this.code.length < 6) {
        this.$Message.warning("请输入正确的手机验证码！");
        return;
      }
      this.loading = true;
      let res = await forgetPwdVerifySmsCode({
        code: this.code,
        verifyCode: this.verifyCode,
      });
      if (res.code == 200) {
        this.verifyCode = res.data;
        this.step = 2;
      }
      this.loading = false;
    },
    async getPublicKey() {
      if (!this.$storage.getPublicKey()) {
        let res = await getPublicKey();
        if (res.code == 200) {
          this.$storage.setPublicKey(res.data);
        }
      }
    },
    getEncrypt(data) {
      let encrypt = new JSEncrypt();
      // 设置公钥
      encrypt.setPublicKey(this.$storage.getPublicKey());
      return encrypt.encrypt(data);
    },
    submit() {
      if (!validPassword(this.password)) {
        this.$Message.warning("请按要求输入密码！");
        return;
      }
      if (this.passwordAgain == null || this.passwordAgain == "") {
        this.$Message.warning("请再次输入密码！");
        return;
      }
      if (this.password != this.passwordAgain) {
        this.$Message.warning("两次密码输入不一致！");
        return;
      }
      this.forgetPwdChange();
    },
    async forgetPwdChange() {
      this.loading = true;
      let data = {
        newConfirmPwd: this.getEncrypt(this.passwordAgain),
        newPwd: this.getEncrypt(this.password),
        verifyCode: this.verifyCode,
      };
      let res = await forgetPwdChange(data);
      if (res.code == 200) {
        this.step = 3;
      }
      this.loading = false;
    },
    // 密码输入过滤掉空格和回车
    keydown(event) {
      if (event.keyCode == 32 || event.keyCode == 13) event.returnValue = false;
    },
    // 获取验证码
    async getCode() {
      if (!this.getCodeAvailable) return;
      this.loading = true;
      let res = await forgetPwdVerifyCode(this.verifyCode);
      if (res.code == 200) {
        this.getCodeAvailable = false;
        let i = 60;
        this.getCodeContent = `${i--}秒后再获取`;
        this.getCodeInterval = setInterval(() => {
          if (i <= 1) {
            this.getCodeContent = "获取验证码";
            this.getCodeAvailable = true;
            clearInterval(this.getCodeInterval);
            return;
          }
          this.getCodeContent = `${i--}秒后再获取`;
        }, 1000);
        this.$Message.success("验证码已经发送，请注意查收！");
      }
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.box-size {
  width: 700px;
}
.code-area {
  margin-top: 4px;
  margin-left: 15px;
  cursor: pointer;
}
.step-area {
  margin-bottom: 32px;

  .step-item {
    @include size(170px, 27px);
    @include bg-setting(null, cover, right);
    color: #fff;
    text-align: center;
    line-height: 27px;
    font-size: 14px;

    &.b-arrow1 {
      background-image: url("~_a/images/b-arrow1@2x.png");
    }
    &.b-arrow2 {
      background-image: url("~_a/images/b-arrow2@2x.png");
    }
    &.b-arrow3 {
      background-image: url("~_a/images/b-arrow3@2x.png");
    }
  }
}
.login-tab-area {
  width: 100%;
  padding-top: 50px;
  border-bottom: #d8d8d8 solid 1px;
  .item {
    width: 165px;
    border-bottom: transparent solid 2px;
    font-size: 22px;
    text-align: center;
    color: rgba(#3d3d3d, 0.7);
    cursor: pointer;
    margin: 0 10px;
    line-height: 40px;
    &:hover {
      color: #3d3d3d;
    }
    &.active {
      color: #3d3d3d;
      border-color: #f9521f;
    }
  }
}
.login-main-area {
  position: relative;
  padding: 20px 160px 70px;
}
.mg-b-15 {
  margin-bottom: 15px;
}
.title {
  width: 80px;
  flex-shrink: 0;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
}
.success-icon {
  @include size(48px);
  margin-right: 30px;
  @include bg-setting("pay-success");
}
</style>
